* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: #0f172a; color: #e2e8f0; }
.container { max-width: 960px; margin: 0 auto; padding: 16px; }
header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
h1 { font-size: 20px; margin: 0; }
main { display: grid; grid-template-columns: 220px 1fr; gap: 12px; }
aside { background: #111827; border: 1px solid #1f2937; border-radius: 8px; padding: 12px; }
aside h3 { margin-top: 0; font-size: 14px; }
aside ul { list-style: none; padding: 0; margin: 0; }
aside li { padding: 4px 0; color: #cbd5e1; }
.chat { display: flex; flex-direction: column; background: #0b1220; border: 1px solid #1f2937; border-radius: 8px; }
#messages { flex: 1; list-style: none; margin: 0; padding: 12px; overflow-y: auto; }
#messages li { padding: 6px 8px; border-radius: 6px; }
#messages li .time { color: #94a3b8; font-size: 12px; margin-right: 6px; }
#messages li .name { color: #60a5fa; margin-right: 6px; }
#messages li .text { color: #e2e8f0; }
#messages li.system { color: #fbbf24; }
#form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #1f2937; }
#input { flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; }
button { padding: 10px 16px; border: none; border-radius: 8px; background: #2563eb; color: white; cursor: pointer; }
button:hover { background: #1d4ed8; }
